<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .iconfont{
            font-size: 26px;
        }
        @font-face {
            font-family: "myicon"; /* Project id 2803093 */
            src: url('../assets/font/iconfont.ttf') format('truetype');
        }
        icon-email{
            font-family: myicon;
            font-size: 26px;
        }
        icon-email:before {
            content: "\e77e";
        }
    </style>
</head>
<body>
    <span class="iconfont icon-email-fill"></span>
    <icon-email></icon-email>
    <hr>
    <div id="app">
        <pre v-pre class="note">
        通过全局配置 app.config.compilerOptions.isCustomElement 设置需要被忽略的自定义标签
            + 取值：(tag: string) => boolean 【false表示组件，true表示自定义标签】
            + 用法：
                const app = Vue.createApp({/* ... */})
                app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-');
                app.mount("#app");
        </pre>
        <!-- 当自定义标签无法识别为组件时，vue会将该标签以自定义标签方式直接渲染【类似与常规的html规则】 -->
        <icon-email></icon-email>
        <hr>
        <test-box></test-box>
        
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data() {
                return {
                    
                }
            },
            components: {
                TestBox:{
                    template:`
                    <div class="cbox">子组件</div>
                    `
                },
            },
        })
        
        app.config.compilerOptions.isCustomElement = function(tag){
            // return true; // 所有的标签包括组件标签都会被作为自定义标签被操作
            // console.log(tag)
            if(tag.startsWith("icon-")){
                return true;
            }
        }

        app.mount("#app")
    </script>
</body>
</html>